<template>
  <div id="loginBox">
    <a-form
    :form="form"
    @submit="handleSubmit"
  >
    <a-form-item
      :validate-status="userNameError() ? 'error' : ''"
      :help="userNameError() || ''"
    >
      <a-input
        v-decorator="[
          '账号',
          {rules: [{ required: true, message: '请输入您的登录账号!' }]}
        ]"
        placeholder="登录账号"
      >
        <a-icon
          slot="prefix"
          type="user"
          style="color:rgba(0,0,0,.25)"
        />
      </a-input>
    </a-form-item>
    <a-form-item
      :validate-status="passwordError() ? 'error' : ''"
      :help="passwordError() || ''"
    >
      <a-input
        v-decorator="[
          '密码',
          {rules: [{ required: true, message: '请输入您的登录密码！' }]}
        ]"
        type="password"
        placeholder="登录密码"
      >
        <a-icon
          slot="prefix"
          type="lock"
          style="color:rgba(0,0,0,.25)"
        />
      </a-input>
    </a-form-item>
    <a-form-item>
      <!-- <router-link :to="{name:'homepage'}">
        <a-button
        block
        type="primary"
      >
        登录
      </a-button>
      </router-link> -->
      <a-button
        block
        type="primary"
        html-type="submit"
        :disabled="hasErrors(form.getFieldsError())"
      >
        登录
      </a-button>
    </a-form-item>
  </a-form>
  </div>

</template>

<script>
function hasErrors (fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}
export default {
  data () {
    return {
      hasErrors,
      form: this.$form.createForm(this),
    };
  },
  mounted () {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
  },
  methods: {
    // Only show error after a field is touched.
    userNameError () {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched('账号') && getFieldError('账号');
    },
    // Only show error after a field is touched.
    passwordError () {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched('密码') && getFieldError('密码');
    },
    modalFunc(txt){
      this.$warning({
        title: '警告',
        content: txt,
      });
    },
    handleSubmit  (e) {
      e.preventDefault();
      var that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          let val = values.账号;
          let pwd = values.密码;
          if(val != '18529257006'){
            this.modalFunc('请正确输入您的账号！');
            return;
          }
          if(pwd != '123456'){
            this.modalFunc('请正确输入您的密码！');
            return;
          }
          let obj = {};
          obj.username = val;
          obj.password = pwd;
          // console.log(obj);
          sessionStorage.setItem('user',JSON.stringify(obj));
          that.$router.push({path:"/homepage",query:obj});
          // that.$router.push({name:'homepage',params:obj});
          // console.log('Received values of form: ', values);
        }
      });
    },
  },
};
</script>


<style scoped>
  #loginBox{
    width: 280px;
    height: 260px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 5px;
    background: #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
